<template>
  <div>
    <navigation></navigation>
    <comment-icon></comment-icon>
    <img src="../../assets/img/bg3.png" alt="" class="rankinglist-img" />

    <div class="rankinglist">
      <div :class="{ rankingnav: navFixed }">
        <div class="rankingnav-box">
          <div class="rankingnav-blue" :style="{ top: tops + 'rem' }"></div>
          <div
            class="rankingnav-item"
            v-for="(item, index) in rankingItem"
            :key="index"
            @mouseenter="changtop(index)"
            @mouseleave="changleave()"
            @click="changIndex(index)"
          >
            <div>
              <img :src="item.img" alt="" />
            </div>
            <div :class="{ rankingactive: indexs === index }">
              {{ item.name }}
            </div>
          </div>
        </div>
      </div>
      <ranking-game :list="gameList.list" :nones="nones"></ranking-game>
    </div>
    <go-top></go-top>
    <bottom></bottom>
  </div>
</template>

<script>
import { newHotRanking } from "../../network/ranking";

import Bottom from "../../components/bottom/bottom";
import GoTop from "../../components/gotop/goTop";
import Navigation from "../../components/navigation/navigation";
import RankingGame from "./rankinglistComp/rankingGame";
import CommentIcon from "../../components/commenticon/commentIcon";
export default {
  components: { Navigation, RankingGame, Bottom, GoTop, CommentIcon },
  name: "NewList",
  data() {
    return {
      rankingItem: [
        {
          img: "http://juntower.top/redu.svg",
          url: "/rankinglist",
          name: "热度榜",
        },
        {
          img: "http://juntower.top/miantiao.svg",
          url: "/praiselist",
          name: "好评榜",
        },
        {
          img: "http://juntower.top/kaoya.svg",
          url: "/newlist",
          name: "新游榜",
        },
        {
          img: "http://juntower.top/hanbao.svg",
          url: "/domesticlist",
          name: "国内榜",
        },
        {
          img: "http://juntower.top/tianping.svg",
          url: "/abroadlist",
          name: "国外榜",
        },
      ],

      gameList: {
        page: 0,
        list: [],
      },
      tops: 1.11,
      stops: 1.11,
      changetop: 0,
      navFixed: false,
      indexs: 2,
      nones: false,
    };
  },
  created() {
    this.getGameList();
  },
  mounted() {
    // 监听滚动条是否滚动到某地
    window.addEventListener("scroll", this.scrollNav);
  },
  methods: {
    getGameList() {
      const page = this.gameList.page + 1;
      newHotRanking(page).then((res) => {
        if (this.gameList.page == res.data.data.pages) {
          this.nones = true;
        } else {
          this.gameList.list.push(...res.data.data.list);
          this.gameList.page += 1;
        }
        console.log(res, this.gameList.list, res.data.data.pages);
      });
    },

    changtop(index) {
      if (index == 0) {
        this.tops = 0.07;
      }
      if (index == 1) {
        this.tops = 0.07 + 0.55;
      }
      if (index == 2) {
        this.tops = 0.07 + 0.52 * 2;
      }
      if (index == 3) {
        this.tops = 0.07 + 0.52 * 3;
      }
      if (index == 4) {
        this.tops = 0.07 + 0.53 * 4;
      }
    },

    changleave() {
      this.tops = this.stops;
    },

    scrollNav() {
      let top = document.documentElement.scrollTop;
      if (top > 150) {
        // 当页面滚动到高度250px处，动态绑定class 来设置头部固定定位
        this.navFixed = true;
      } else {
        this.navFixed = false;
      }

      let bottom =
        document.documentElement.scrollHeight -
        document.documentElement.scrollTop -
        document.documentElement.clientHeight;
      if (bottom < 150 && !this.nones) {
        this.getGameList();
      }
    },

    changIndex(index) {
      this.$router.push(this.rankingItem[index].url);
      location.reload();
    },
  },
};
</script>

<style>
</style>